<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>配表系统</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- CodeMirror 语法高亮 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/theme/monokai.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/addon/hint/show-hint.min.css">
    <!-- CSS 样式文件 -->
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/schema.css">
    <link rel="stylesheet" href="css/data.css">
    <link rel="stylesheet" href="css/enum.css">
    <!-- 富文本编辑器样式 -->
    <link rel="stylesheet" href="components/richtext-editor.css">
</head>
<body>
    <div class="container">
        <!-- 顶部导航 -->
        <header class="header">
            <h1>配表系统</h1>
            <div class="nav-tabs">
                <button class="nav-tab active" data-tab="schema">Schema编辑</button>
                <button class="nav-tab" data-tab="enum">枚举管理</button>
                <button class="nav-tab" data-tab="data">配表编辑</button>
            </div>
        </header>

        <!-- Schema编辑面板 -->
        <div class="panel" id="schema-panel">
            <div class="panel-header">
                <h2>Schema管理</h2>
                <button class="btn btn-primary" id="add-schema-btn">
                    <i class="fas fa-plus"></i> 新建Schema
                </button>
            </div>

            <div class="schema-list">
                <div class="schema-list-header">
                    <h3>Schema列表</h3>
                </div>
                <div id="schema-items" class="schema-items">
                    <!-- Schema项将动态添加 -->
                </div>
            </div>

            <div class="schema-editor" id="schema-editor" style="display: none;">
                <div class="editor-header">
                    <h3 id="schema-editor-title">编辑Schema</h3>
                    <div class="editor-actions">
                        <button class="btn btn-success" id="save-schema-btn" title="保存 Schema (Ctrl+S)">
                            <i class="fas fa-save"></i> 保存
                        </button>
                        <button class="btn btn-secondary" id="cancel-schema-btn">
                            <i class="fas fa-times"></i> 取消
                        </button>
                    </div>
                </div>

                <div class="editor-basic-info">
                    <div class="form-group">
                        <label>Schema名称</label>
                        <input type="text" id="schema-name-input" class="form-control" placeholder="请输入Schema名称">
                    </div>

                    <div class="form-group">
                        <label>Schema描述</label>
                        <input type="text" id="schema-desc-input" class="form-control" placeholder="请输入Schema描述">
                    </div>
                </div>

                <div class="split-editor">
                    <div class="editor-sidebar">
                        <div class="sidebar-header">
                            <h4>字段列表</h4>
                            <button class="btn btn-sm btn-primary" id="add-field-btn">
                                <i class="fas fa-plus"></i>
                            </button>
                        </div>
                        <div id="fields-list" class="fields-list">
                            <!-- 字段列表将动态添加 -->
                        </div>
                    </div>
                    <div class="editor-main">
                        <div id="field-editor-container" class="field-editor-container">
                            <div class="empty-state">
                                <i class="fas fa-hand-pointer"></i>
                                <p>请从左侧选择或添加字段</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 枚举管理面板 -->
        <div class="panel" id="enum-panel" style="display: none;">
            <div class="panel-header">
                <h2>枚举管理</h2>
                <button class="btn btn-primary" id="add-enum-btn">
                    <i class="fas fa-plus"></i> 新建枚举
                </button>
            </div>

            <div id="enum-editor" class="enum-editor" style="display: none;">
                <div class="enum-header">
                    <h3 id="enum-editor-title">枚举列表</h3>
                    <div class="enum-header-actions">
                        <button class="btn btn-success" id="save-enum-btn" title="保存枚举 (Ctrl+S)">
                            <i class="fas fa-save"></i> 保存
                        </button>
                        <button class="btn btn-secondary" id="preview-enum-btn" style="display: none;">
                            <i class="fas fa-eye"></i> 预览
                        </button>
                        <button class="btn btn-primary" id="export-enum-lua-btn" style="display: none;">
                            <i class="fas fa-file-export"></i> 导出
                        </button>
                    </div>
                </div>

                <div class="split-editor">
                    <div class="editor-sidebar">
                        <div class="sidebar-header">
                            <h4>枚举文件</h4>
                            <div class="sidebar-header-actions">
                                <button class="btn btn-sm btn-primary" id="add-enum-sidebar-btn" title="新建枚举">
                                    <i class="fas fa-plus"></i>
                                </button>
                            </div>
                        </div>
                        <div class="enum-files-search-container">
                            <input type="text" 
                                   id="enum-files-search" 
                                   class="form-control" 
                                   placeholder="搜索枚举文件..."
                                   autocomplete="off">
                            <i class="fas fa-search search-icon"></i>
                        </div>
                        <div id="enum-files-list" class="enum-files-list">
                            <!-- 枚举文件列表将动态添加 -->
                        </div>
                    </div>
                    <div class="editor-main">
                        <div id="enum-content-editor" class="enum-content-editor">
                            <div class="empty-state">
                                <i class="fas fa-hand-pointer"></i>
                                <p>请从左侧选择或添加枚举文件</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 配表编辑面板 -->
        <div class="panel" id="data-panel" style="display: none;">
            <div class="panel-header">
                <h2>配表编辑</h2>
                <div class="schema-selector">
                    <label>Schema</label>
                    <div class="custom-datalist-wrapper" style="max-width: 300px;">
                        <input type="text" 
                               id="data-schema-select" 
                               class="custom-datalist-input" 
                               placeholder="请输入或选择Schema..."
                               autocomplete="off">
                        <div class="custom-datalist-dropdown" id="data-schema-select-dropdown">
                            <div class="custom-datalist-empty">暂无Schema</div>
                        </div>
                    </div>
                </div>
            </div>

            <div id="data-editor" class="data-editor" style="display: none;">
                <div class="data-header">
                    <h3 id="data-table-title">配表数据</h3>
                    <div class="data-header-actions">
                        <button class="btn btn-success" id="save-data-btn" title="保存数据 (Ctrl+S)">
                            <i class="fas fa-save"></i> 保存
                        </button>
                        <button class="btn btn-warning" id="import-data-btn" style="display: none;">
                            <i class="fas fa-file-import"></i> 导入
                        </button>
                        <button class="btn btn-secondary" id="preview-data-btn" style="display: none;">
                            <i class="fas fa-eye"></i> 预览
                        </button>
                        <button class="btn btn-primary" id="export-lua-btn" style="display: none;">
                            <i class="fas fa-file-export"></i> 导出
                        </button>
                    </div>
                </div>

                <div class="split-editor">
                    <div class="editor-sidebar">
                        <div class="sidebar-header">
                            <h4>数据列表</h4>
                            <div class="sidebar-header-actions">
                                <button class="btn btn-sm btn-secondary" id="fill-enum-btn" onclick="showFillFromEnumDialog()" title="从枚举填充数据行">
                                    <i class="fas fa-fill"></i>
                                </button>
                                <button class="btn btn-sm btn-primary" id="add-data-row-btn">
                                    <i class="fas fa-plus"></i>
                                </button>
                            </div>
                        </div>
                        <div class="data-rows-search-container">
                            <input type="text" 
                                   id="data-rows-search" 
                                   class="form-control" 
                                   placeholder="搜索数据行..."
                                   autocomplete="off">
                            <i class="fas fa-search search-icon"></i>
                        </div>
                        <div id="data-rows-list" class="data-rows-list">
                            <!-- 数据行列表将动态添加 -->
                        </div>
                    </div>
                    <div class="editor-main">
                        <div id="data-row-editor-container" class="data-row-editor-container">
                            <div class="empty-state">
                                <i class="fas fa-hand-pointer"></i>
                                <p>请从左侧选择或添加数据行</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 导出Lua模态框 -->
    <div id="export-lua-modal" class="modal">
        <div class="modal-content modal-large">
            <div class="modal-header">
                <h3>导出</h3>
                <button class="btn-close" onclick="closeLuaExportModal()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="export-options">
                    <div class="form-group">
                        <label>导出格式：</label>
                        <select id="export-format-select" class="form-control">
                            <option value="table">Lua表格 (table)</option>
                            <option value="array">Lua数组 (array)</option>
                            <option value="csv">蛋仔表格 (csv)</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>命名空间：</label>
                        <input type="text" id="export-namespace" class="form-control" placeholder="例如: Tile" value="Tile">
                    </div>
                    <div class="form-group" id="table-key-type-group">
                        <label>字段键类型：</label>
                        <input type="text" id="export-table-key-type" class="form-control" placeholder="例如: string, integer, FishCode" value="string">
                        <small style="color: #7f8c8d;">仅在Table格式下生效，用于类型注解 @type table&lt;键类型, 值类型&gt;</small>
                    </div>
                    <div class="form-group">
                        <label>包导入列表：</label>
                        <div id="require-list" class="require-list">
                            <!-- 动态生成的包导入项 -->
                        </div>
                        <button type="button" class="btn btn-sm btn-primary" onclick="addRequireItem()">
                            <i class="fas fa-plus"></i> 添加包导入
                        </button>
                    </div>
                </div>
                <div class="code-container">
                    <pre id="lua-code-output" class="lua-code"></pre>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-success" id="download-export-btn">
                    <i class="fas fa-download"></i> 下载文件
                </button>
                <button class="btn btn-primary" id="copy-lua-btn">
                    <i class="fas fa-copy"></i> 复制代码
                </button>
                <button class="btn btn-secondary" onclick="closeLuaExportModal()">
                    <i class="fas fa-times"></i> 关闭
                </button>
            </div>
        </div>
    </div>

    <!-- 预览模态框 -->
    <div id="preview-modal" class="modal">
        <div class="modal-content modal-large">
            <div class="modal-header">
                <h3>数据预览</h3>
                <button class="btn-close" onclick="closePreviewModal()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="preview-layout">
                    <!-- 左侧：脚本编辑器 -->
                    <div class="preview-left-panel">
                        <div class="script-executor-panel">
                            <div class="script-header">
                                <h4>
                                    <i class="fas fa-code"></i> 脚本处理器
                                </h4>
                                <div class="script-header-actions">
                                    <div class="script-examples-dropdown">
                                        <button class="btn btn-sm btn-secondary" onclick="toggleScriptExamples()">
                                            <i class="fas fa-lightbulb"></i> 示例
                                        </button>
                                        <div id="script-examples-menu" class="script-examples-menu">
                                            <div class="example-item" onclick="loadScriptExample('extract')">
                                                <div class="example-title">提取单个字段</div>
                                                <div class="example-desc">返回某个字段的值</div>
                                            </div>
                                            <div class="example-item" onclick="loadScriptExample('filter')">
                                                <div class="example-title">条件筛选</div>
                                                <div class="example-desc">筛选符合条件的数据</div>
                                            </div>
                                            <div class="example-item" onclick="loadScriptExample('transform')">
                                                <div class="example-title">数据转换</div>
                                                <div class="example-desc">组合多个字段</div>
                                            </div>
                                            <div class="example-item" onclick="loadScriptExample('calculate')">
                                                <div class="example-title">计算处理</div>
                                                <div class="example-desc">进行数值计算</div>
                                            </div>
                                            <div class="example-item" onclick="loadScriptExample('updateEntry')">
                                                <div class="example-title">修改条目元素</div>
                                                <div class="example-desc">精准修改条目数组的某一行</div>
                                            </div>
                                        </div>
                                    </div>
                                    <button class="btn btn-sm btn-info" onclick="openScriptHelp()">
                                        <i class="fas fa-question-circle"></i> 帮助
                                    </button>
                                    <button class="btn btn-sm btn-success" onclick="savePreviewScript(false, event)" title="保存脚本 (Ctrl+S)">
                                        <i class="fas fa-save"></i> 保存
                                    </button>
                                    <button class="btn btn-sm btn-primary" onclick="executeScript()" title="执行脚本 (Ctrl+Enter)">
                                        <i class="fas fa-play"></i> 执行
                                    </button>
                                </div>
                            </div>
                            <div class="script-input-wrapper">
                                <div class="script-help-text">
                                    <i class="fas fa-info-circle"></i> 
                                    输入 data. 自动补全字段 | Ctrl+J 手动补全 | Ctrl+Enter 执行 | Ctrl+S 保存
                                </div>
                                <div id="script-syntax-warning" class="script-syntax-warning" style="display: none;">
                                    <i class="fas fa-exclamation-triangle"></i>
                                    <span id="script-warning-text"></span>
                                </div>
                                <textarea 
                                    id="preview-script-input" 
                                    class="script-input" 
                                    placeholder="输入处理函数，例如：
(index, data) => {
    return data.fish_name;
}

或:

function(index, data) {
    if (data.rarity > 2) {
        return {
            id: data.fish_id,
            name: data.fish_name
        };
    }
}"
                                    spellcheck="false"
                                ></textarea>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 右侧：预览表格 -->
                    <div class="preview-right-panel">
                        <!-- 上半部分：原始数据表 -->
                        <div class="preview-section preview-original">
                            <div class="preview-section-header">
                                <h4>
                                    <i class="fas fa-table"></i> 原始数据
                                </h4>
                            </div>
                            <div id="preview-container" class="preview-container">
                                <!-- 原始预览内容 -->
                            </div>
                        </div>
                        
                        <!-- 下半部分：查询结果表 -->
                        <div class="preview-section preview-result" id="script-result-container" style="display: none;">
                            <div class="preview-section-header">
                                <h4>
                                    <i class="fas fa-search"></i> <span id="result-title-text">查询结果</span>
                                    <span class="result-count"></span>
                                </h4>
                                <div class="script-result-actions">
                                    <button id="apply-modifications-btn" class="btn btn-sm btn-primary" onclick="applyModifications()" style="display: none;">
                                        <i class="fas fa-check"></i> 应用更新
                                    </button>
                                    <button class="btn btn-sm btn-success" onclick="copyScriptResult()">
                                        <i class="fas fa-copy"></i> 复制
                                    </button>
                                    <button class="btn btn-sm btn-secondary" onclick="clearScriptResult()">
                                        <i class="fas fa-times"></i> 清除
                                    </button>
                                </div>
                            </div>
                            <div id="script-result-content" class="script-result-content">
                                <!-- 脚本执行结果 -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-success" id="download-preview-btn">
                    <i class="fas fa-download"></i> 下载CSV
                </button>
                <button class="btn btn-secondary" onclick="closePreviewModal()">
                    <i class="fas fa-times"></i> 关闭
                </button>
            </div>
        </div>
    </div>

    <!-- 删除确认模态框 -->
    <div id="confirm-modal" class="modal">
        <div class="modal-content">
            <h3>确认删除</h3>
            <p id="confirm-message">确定要删除吗？</p>
            <div class="modal-actions">
                <button class="btn btn-danger" id="confirm-delete-btn">删除</button>
                <button class="btn btn-secondary" id="cancel-delete-btn">取消</button>
            </div>
        </div>
    </div>

    <!-- 填充枚举模态框 -->
    <div id="fill-enum-modal" class="modal">
        <div class="modal-content">
            <h3>填充为枚举</h3>
            <div class="form-group">
                <label>选择枚举表</label>
                <select id="fill-enum-select" class="form-control">
                    <option value="">请选择枚举</option>
                </select>
            </div>
            <div class="form-group">
                <label>填充方式</label>
                <select id="fill-enum-mode" class="form-control">
                    <option value="key">使用枚举键名 (例如: Wood, Bamboo)</option>
                    <option value="value">使用枚举值 (例如: 1, 2)</option>
                </select>
            </div>
            <div class="form-group">
                <label>
                    <input type="checkbox" id="fill-enum-with-prefix" checked>
                    添加枚举表名前缀 (例如: RodCode.Wood)
                </label>
            </div>
            <div class="form-group">
                <label>
                    <input type="checkbox" id="fill-enum-as-raw" checked>
                    数据行名称为原始文本 (不加引号)
                </label>
            </div>
            <div class="modal-actions">
                <button class="btn btn-primary" id="confirm-fill-enum-btn">确定</button>
                <button class="btn btn-secondary" id="cancel-fill-enum-btn">取消</button>
            </div>
        </div>
    </div>

    <!-- 枚举预览模态框 -->
    <div id="enum-preview-modal" class="modal">
        <div class="modal-content modal-content-large">
            <h3>枚举预览</h3>
            <div id="enum-preview-content" class="enum-preview-content">
                <!-- 预览内容 -->
            </div>
            <div class="modal-actions">
                <button class="btn btn-secondary" id="close-enum-preview-btn">关闭</button>
            </div>
        </div>
    </div>

    <!-- 枚举导出Lua模态框 -->
    <div id="enum-export-lua-modal" class="modal">
        <div class="modal-content modal-large">
            <div class="modal-header">
                <h3>导出枚举</h3>
                <button class="btn-close" onclick="closeEnumExportModal()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="code-container">
                    <pre id="enum-lua-code-output" class="lua-code"></pre>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-success" id="download-enum-btn">
                    <i class="fas fa-download"></i> 下载文件
                </button>
                <button class="btn btn-primary" id="copy-enum-lua-btn">
                    <i class="fas fa-copy"></i> 复制代码
                </button>
                <button class="btn btn-secondary" onclick="closeEnumExportModal()">
                    <i class="fas fa-times"></i> 关闭
                </button>
            </div>
        </div>
    </div>

    <!-- 标志选择模态框 -->
    <div id="flags-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>选择标志组合</h3>
                <button class="btn-close" onclick="closeFlagsModal()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <div id="flags-checkboxes" class="flags-checkboxes">
                    <!-- 复选框列表将在这里动态生成 -->
                </div>
                <div class="flags-result">
                    <label>组合值：</label>
                    <input type="number" id="flags-result-value" class="form-control" oninput="updateFlagsFromManualInput()">
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" onclick="confirmFlagsSelection()">
                    <i class="fas fa-check"></i> 确定
                </button>
                <button class="btn btn-secondary" onclick="closeFlagsModal()">
                    <i class="fas fa-times"></i> 取消
                </button>
            </div>
        </div>
    </div>

    <!-- 导入数据模态框 -->
    <div id="import-data-modal" class="modal">
        <div class="modal-content modal-large">
            <div class="modal-header">
                <h3>导入数据</h3>
                <button class="btn-close" onclick="closeImportDataModal()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>选择文件类型：</label>
                    <select id="import-file-type" class="form-control" onchange="onImportFileTypeChange()">
                        <option value="csv">CSV文件 (蛋仔表格格式)</option>
                        <option value="lua">Lua文件 (Table格式)</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>选择文件：</label>
                    <input type="file" id="import-file-input" class="form-control" accept=".csv">
                </div>
                <div class="form-group">
                    <label>
                        <input type="checkbox" id="import-clear-existing" checked>
                        清空现有数据（取消勾选则追加数据）
                    </label>
                </div>
                <div id="import-preview" class="import-preview" style="display: none;">
                    <h4>预览导入内容</h4>
                    <div id="import-preview-content" class="import-preview-content"></div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-success" id="confirm-import-btn" disabled>
                    <i class="fas fa-file-import"></i> 确认导入
                </button>
                <button class="btn btn-secondary" onclick="closeImportDataModal()">
                    <i class="fas fa-times"></i> 取消
                </button>
            </div>
        </div>
    </div>

    <!-- 脚本帮助模态框 -->
    <div class="modal" id="script-help-modal">
        <div class="modal-content" style="max-width: 800px; max-height: 80vh; overflow-y: auto;">
            <div class="modal-header">
                <h3><i class="fas fa-question-circle"></i> 脚本编辑器帮助</h3>
                <button class="close-btn" onclick="closeScriptHelp()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body" style="padding: 20px;">
                <section style="margin-bottom: 24px;">
                    <h4 style="margin-bottom: 12px; color: #4a9eff;"><i class="fas fa-code"></i> 函数格式</h4>
                    <p style="margin-bottom: 8px;">支持箭头函数和普通函数两种格式：</p>
                    <div style="background: #2d2d2d; padding: 12px; border-radius: 4px; margin-bottom: 8px;">
                        <code style="color: #a9dc76;">(index, data, source) => { ... }</code>
                    </div>
                    <div style="background: #2d2d2d; padding: 12px; border-radius: 4px;">
                        <code style="color: #a9dc76;">function(index, data, source) { ... }</code>
                    </div>
                </section>

                <section style="margin-bottom: 24px;">
                    <h4 style="margin-bottom: 12px; color: #4a9eff;"><i class="fas fa-layer-group"></i> 参数说明</h4>
                    <ul style="list-style: none; padding: 0;">
                        <li style="margin-bottom: 8px; padding-left: 20px; position: relative;">
                            <i class="fas fa-angle-right" style="position: absolute; left: 0; color: #78dce8;"></i>
                            <strong>index</strong> - 当前行索引（从0开始）
                        </li>
                        <li style="margin-bottom: 8px; padding-left: 20px; position: relative;">
                            <i class="fas fa-angle-right" style="position: absolute; left: 0; color: #78dce8;"></i>
                            <strong>data</strong> - 当前行数据对象（只读）
                        </li>
                        <li style="margin-bottom: 8px; padding-left: 20px; position: relative;">
                            <i class="fas fa-angle-right" style="position: absolute; left: 0; color: #78dce8;"></i>
                            <strong>source</strong> - 整个表的数据数组（只读，可选）
                        </li>
                    </ul>
                </section>

                <section style="margin-bottom: 24px;">
                    <h4 style="margin-bottom: 12px; color: #4a9eff;"><i class="fas fa-magic"></i> 全局函数</h4>
                    <div style="margin-bottom: 16px;">
                        <div style="background: #2d2d2d; padding: 12px; border-radius: 4px; margin-bottom: 8px;">
                            <code style="color: #ffd866;">update</code><code style="color: #fff;">(index, newData)</code>
                        </div>
                        <p style="margin-left: 12px; color: #666; margin-bottom: 8px;">更新指定行的数据，支持路径语法精准修改嵌套值：</p>
                        <ul style="margin-left: 32px; color: #666; font-size: 13px;">
                            <li style="margin-bottom: 4px;"><code style="background: #f0f0f0; padding: 2px 6px; border-radius: 2px;">{ name: "新值" }</code> - 更新顶级字段</li>
                            <li style="margin-bottom: 4px;"><code style="background: #f0f0f0; padding: 2px 6px; border-radius: 2px;">{ "entries[0].weight": 100 }</code> - 更新数组第0项的weight</li>
                            <li style="margin-bottom: 4px;"><code style="background: #f0f0f0; padding: 2px 6px; border-radius: 2px;">{ "dict.subfield": "value" }</code> - 更新字典子字段</li>
                            <li style="margin-bottom: 4px;"><code style="background: #f0f0f0; padding: 2px 6px; border-radius: 2px;">{ "list[2]": 999 }</code> - 更新列表第2项</li>
                        </ul>
                    </div>
                    <div>
                        <div style="background: #2d2d2d; padding: 12px; border-radius: 4px; margin-bottom: 8px;">
                            <code style="color: #ffd866;">yield</code><code style="color: #fff;">(value)</code>
                        </div>
                        <p style="margin-left: 12px; color: #666;">输出一条结果，可多次调用产生多个结果</p>
                    </div>
                </section>

                <section style="margin-bottom: 24px;">
                    <h4 style="margin-bottom: 12px; color: #4a9eff;"><i class="fas fa-keyboard"></i> 自动补全</h4>
                    <ul style="list-style: none; padding: 0;">
                        <li style="margin-bottom: 8px; padding-left: 20px; position: relative;">
                            <i class="fas fa-check" style="position: absolute; left: 0; color: #a9dc76;"></i>
                            输入 <code>upd</code> 或 <code>yie</code> - 补全函数名
                        </li>
                        <li style="margin-bottom: 8px; padding-left: 20px; position: relative;">
                            <i class="fas fa-check" style="position: absolute; left: 0; color: #a9dc76;"></i>
                            输入 <code>data.</code> - 补全顶级字段
                        </li>
                        <li style="margin-bottom: 8px; padding-left: 20px; position: relative;">
                            <i class="fas fa-check" style="position: absolute; left: 0; color: #a9dc76;"></i>
                            在 <code>update(index, { })</code> 内 - 补全字段名
                        </li>
                        <li style="margin-bottom: 8px; padding-left: 20px; position: relative;">
                            <i class="fas fa-check" style="position: absolute; left: 0; color: #a9dc76;"></i>
                            换行后自动触发补全（在 update 参数内）
                        </li>
                        <li style="margin-bottom: 8px; padding-left: 20px; position: relative;">
                            <i class="fas fa-check" style="position: absolute; left: 0; color: #a9dc76;"></i>
                            输入 <code>data.字典字段.</code> - 补全字典子字段
                        </li>
                        <li style="margin-bottom: 8px; padding-left: 20px; position: relative;">
                            <i class="fas fa-check" style="position: absolute; left: 0; color: #a9dc76;"></i>
                            输入 <code>data.条目字段.</code> - 提示数组操作方法
                        </li>
                        <li style="margin-bottom: 8px; padding-left: 20px; position: relative;">
                            <i class="fas fa-check" style="position: absolute; left: 0; color: #a9dc76;"></i>
                            <code>Ctrl+Space</code> - 手动触发补全
                        </li>
                    </ul>
                </section>

                <section style="margin-bottom: 24px;">
                    <h4 style="margin-bottom: 12px; color: #4a9eff;"><i class="fas fa-rocket"></i> 快捷键</h4>
                    <ul style="list-style: none; padding: 0;">
                        <li style="margin-bottom: 8px; padding-left: 20px; position: relative;">
                            <i class="fas fa-keyboard" style="position: absolute; left: 0; color: #fc9867;"></i>
                            <code>Ctrl+Enter</code> - 执行脚本
                        </li>
                        <li style="margin-bottom: 8px; padding-left: 20px; position: relative;">
                            <i class="fas fa-keyboard" style="position: absolute; left: 0; color: #fc9867;"></i>
                            <code>Ctrl+J</code> 或 <code>Alt+/</code> - 手动补全
                        </li>
                        <li style="margin-bottom: 8px; padding-left: 20px; position: relative;">
                            <i class="fas fa-keyboard" style="position: absolute; left: 0; color: #fc9867;"></i>
                            <code>Ctrl+/</code> - 切换注释（注释/取消注释选中行）
                        </li>
                        <li style="margin-bottom: 8px; padding-left: 20px; position: relative;">
                            <i class="fas fa-keyboard" style="position: absolute; left: 0; color: #fc9867;"></i>
                            <code>Ctrl+S</code> - 保存（根据当前面板自动保存）
                        </li>
                        <li style="margin-bottom: 8px; padding-left: 20px; position: relative;">
                            <i class="fas fa-keyboard" style="position: absolute; left: 0; color: #fc9867;"></i>
                            <code>Shift+Alt+F</code> - 格式化代码
                        </li>
                    </ul>
                </section>

                <section>
                    <h4 style="margin-bottom: 12px; color: #4a9eff;"><i class="fas fa-lightbulb"></i> 使用示例</h4>
                    <p style="margin-bottom: 12px;">点击左上角的"示例"按钮查看更多实用示例，包括：</p>
                    <ul style="list-style: none; padding: 0;">
                        <li style="margin-bottom: 6px; padding-left: 20px; position: relative;">
                            <i class="fas fa-chevron-right" style="position: absolute; left: 0; top: 4px; color: #666; font-size: 12px;"></i>
                            更新数据并预览效果
                        </li>
                        <li style="margin-bottom: 6px; padding-left: 20px; position: relative;">
                            <i class="fas fa-chevron-right" style="position: absolute; left: 0; top: 4px; color: #666; font-size: 12px;"></i>
                            展开条目数组产生多个结果
                        </li>
                        <li style="margin-bottom: 6px; padding-left: 20px; position: relative;">
                            <i class="fas fa-chevron-right" style="position: absolute; left: 0; top: 4px; color: #666; font-size: 12px;"></i>
                            修改字典和条目数组元素
                        </li>
                        <li style="margin-bottom: 6px; padding-left: 20px; position: relative;">
                            <i class="fas fa-chevron-right" style="position: absolute; left: 0; top: 4px; color: #666; font-size: 12px;"></i>
                            条件过滤和数据转换
                        </li>
                    </ul>
                </section>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" onclick="closeScriptHelp()">
                    <i class="fas fa-check"></i> 知道了
                </button>
            </div>
        </div>
    </div>

    <!-- 富文本编辑器容器 -->
    <div id="richtext-editor-container"></div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <!-- CodeMirror 语法高亮库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/javascript/javascript.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/addon/edit/closebrackets.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/addon/edit/matchbrackets.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/addon/comment/comment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/addon/hint/show-hint.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/addon/hint/javascript-hint.min.js"></script>
    
    <!-- JavaScript文件 -->
    <script src="js/common.js"></script>
    <script src="js/enum-manager.js"></script>
    <script src="js/schema-manager.js"></script>
    <script src="js/data-manager.js"></script>
    <!-- 富文本编辑器 -->
    <script src="components/richtext-editor.js"></script>
    <script>
        // 加载富文本编辑器 HTML 模板
        fetch('components/richtext-editor.html')
            .then(response => {
                if (!response.ok) {
                    throw new Error('加载富文本编辑器模板失败');
                }
                return response.text();
            })
            .then(html => {
                document.getElementById('richtext-editor-container').innerHTML = html;
                // HTML 插入后立即初始化
                RichTextEditor.init();
            })
            .catch(err => {
                console.error('富文本编辑器加载失败:', err);
            });
    </script>
</body>
</html>
